<!DOCTYPE html>
<html lang="en">
<head>
<title>Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap-css -->
<link href="css3/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--// bootstrap-css -->
<!-- css -->
<link rel="stylesheet" href="css3/style.css" type="text/css" media="all" />
<!--// css -->
<!-- font-awesome icons -->
<link href="css1/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<link rel="stylesheet" href="css3/lightbox.css">
<!-- font -->
<link href='css3/first.css' rel='stylesheet' type='text/css'>
<link href="css3/second.css" rel="stylesheet">
<link href='css3/third.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/title.css">
	<link rel="stylesheet" href="css/style.css">
	<!-- responsive style sheet -->
	<link rel="stylesheet" href="css/responsive.css">
<!-- //font -->
<script src="js3/jquery-1.11.1.min.js"></script>
<script src="js3/bootstrap.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
	<!-- banner -->
	<div class="main-page-wrapper">

		<!-- =====导航栏开始 ======= -->
		<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
			<div class="container">

				<!-- navbar header -->
				<div class="navbar-header">

					<a href="#" class="navbar-brand">宠爱有家</a>
				</div>

				<div class="collapse navbar-collapse">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index/index.html" class="smoothScroll">首页</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">领养</a></li>
						<li><a href="../宠物店展示/宠物店展示.html" class="smoothScroll">寄养</a></li>
						<li><a href="../index/上架.html" class="smoothScroll">为小可爱找主人</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">购买宠物</a></li>
						<li><a href="../index/博客.html" class="smoothScroll">社区</a></li>
						<li><a href="../登录/login.html" class="smoothScroll">登录</a></li>
						<li><a href="../联系我们/lxwm.html" class="smoothScroll">联系我们</a></li>
					</ul>

				</div>

			</div>
		</div>


		<!-- =========================
    INTRO SECTION   
============================== -->
		<section id="intro" class="parallax-section">
			<div class="container">
				<div class="row">

					<div class="col-md-12 col-sm-12">
						<h3 class="wow bounceIn" style="color: aliceblue" data-wow-delay="0.9s">背景标题</h3>
						<h1 class="wow fadeInUp" style="color: aliceblue" data-wow-delay="1.6s">宠爱有家</h1>
					</div>


				</div>
			</div>
		</section>
		
	</div>
	<!-- //banner -->
	<!-- gallery -->
	<div class="gallery">
		<div class="container">
			<div class="gallery-grids">
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g1.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g2.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g3.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>		
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g4.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g5.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g6.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>		
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g1.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g2.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>	
								</a>
							</figure>
						</div>
					</div>
					<div class="col-md-4 gallery-grid">
						<div class="grid">
							<figure class="effect-apollo">
								<a class="example-image-link" href="../index/购买详情.html" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
									<img src="images/g3.jpg" alt="" />
									<figcaption>
										<p>Proin vitae luctus dui, sit amet ultricies leo</p>
									</figcaption>		
								</a>
							</figure>
						</div>
					</div>
					<div class="clearfix"> </div>
					<script src="js3/lightbox-plus-jquery.min.js"> </script>
			</div>
		</div>
	</div>
	<!-- //gallery -->
	<!-- Footer ____________________________ -->
		<footer>
			<div class="container1">
				<div class="top-footer row">
					<div class="col-md-5 col-sm-7 col-xs-12 footer-logo">
						<a href="#"><img src="images/them-logo/them-main-logo-2.jpg" alt="Logo"></a>
						<p><span class="p-color">myPet</span> was established in 2017 by Pet business veterans, Rod
							Davies and Matthew Levington, the journey began when founders Matthew Levington and Rod
							Davies, met up in 2017 over a beer</p>
						<ul class="icon">
							<li><a href="" class="tran3s"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="" class="tran3s"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							<li><a href="" class="tran3s"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
							<li><a href="" class="tran3s"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						</ul>

						<ul class="policy">
							<li><a href="" class="tran3s">Privacy Policy </a></li>
							<li><a>|</a></li>
							<li><a href="" class="tran3s">Legal Policy</a></li>
						</ul>
					</div> <!-- /.footer-logo -->

					<div class="col-md-4 col-sm-5 col-xs-12 footer-list">
						<h5>Important Links</h5>

						<ul>
							<li><a href="#" class="tran3s">首页</a></li>
							<li><a href="#" class="tran3s">关于我们 </a></li>
							<li><a href="#" class="tran3s">寄养</a></li>
							<li><a href="shop.html" class="tran3s">领养</a></li>
							<li><a href="#" class="tran3s">出售</a></li>
							<li><a href="#" class="tran3s">新闻</a></li>
							<li><a href="#" class="tran3s">社区</a></li>
						</ul>
						<ul>
							<li><a href="#" class="tran3s">宠物</a></li>
							<li><a href="#" class="tran3s">我们的历史</a></li>
							<li><a href="#" class="tran3s">我们做了什么</a></li>
							
						</ul>
					</div> <!-- /.footer-list -->

					<div class="col-md-3 col-xs-12 footer-news">
						<h5>News Update</h5>

						<ul>
							<li>
								<h6><a href="#" class="tran3s">Prefinished Solid Hardwood Flooring</a></h6>
								<span>january 02,2017</span>
							</li>
							<li>
								<h6><a href="#" class="tran3s">Latst pet care in summer 12 care them well</a></h6>
								<span>january 02,2017</span>
							</li>
						</ul>
					</div> <!-- /.footer-news -->
				</div> <!-- /.top-footer -->
			</div> <!-- /.container -->

			<div class="bottom-footer">
				<div class="container">
					<p class="float-left">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
							href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
					<form action="#" class="float-right">
						<input type="text" placeholder="Your Email">
						<button class="tran3s p-bg-color">Subscribe</button>
					</form>
				</div> <!-- /.container -->
			</div> <!-- /.bottom-footer -->
		</footer>

	</div> <!-- /.main-page-wrapper -->


	<!-- Scroll Top Button -->
	<button class="scroll-top tran7s p-color-bg">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</button>

	<!-- pre loader  -->
	<div id="loader-wrapper">
		<div id="loader"></div>
	</div>

	<!-- //copyright -->
	<script src="js3/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js3/move-top.js"></script>
<script type="text/javascript" src="js3/easing.js"></script>
<!-- js file -->
	<!-- Main js file/jquery -->
	<script src="vendor/jquery-2.2.3.min.js"></script>
	<!-- bootstrap-select.min.js -->
	<script src="vendor/bootstrap-select-1.10.0/dist/js/bootstrap-select.min.js"></script>
	<!-- bootstrap js -->
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
	<!-- camera js -->
	<script src="vendor/Camera-master/scripts/camera.min.js"></script>
	<script src="vendor/Camera-master/scripts/jquery.easing.1.3.js"></script>
	<!-- Owl carousel -->
	<script src="vendor/OwlCarousel2/dist/owl.carousel.min.js"></script>
	<!-- appear & countTo -->
	<script src="vendor/jquery.appear.js"></script>
	<script src="vendor/jquery.countTo.js"></script>
	<!-- fancybox -->
	<script src="vendor/fancybox/dist/jquery.fancybox.min.js"></script>
	<!-- Gallery - isotop -->
	<script type="text/javascript" src="vendor/isotope.pkgd.min.js"></script>
	<!-- WOW js -->
	<script type="text/javascript" src="vendor/WOW-master/dist/wow.min.js"></script>
	<!-- Circle Progress -->
	<script type="text/javascript" src="vendor/circle-progress.js"></script>
	<!-- Style js -->
<script src="./js/title.js"></script>
	<script src="js/custom.js"></script>
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->

</body>	
</html>